import IntegrationTable, {
	IntegrationTableProps,
	OperatingItem,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import { Image, Cascader, Radio, Rate } from "antd";
import Search from "antd/lib/input/Search";
import { user, classify, remove } from "./service";
import { arrayToObject, getArray } from "phinney-toolkit";
import { DynamicFormItem } from "@/components/DynamicForm";
import axios from "axios";
// @page 商家
const Business: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;
	// 用户列表
	let userList: any[] = [];
	// 分类列表
	const classifyTypeList = [
		{ label: "商城", value: 100 },
		{ label: "二手闲置", value: 200 },
		{ label: "回收物", value: 300 },
		{ label: "好物", value: 400 },
		{ label: "游戏", value: 500 },
	];

	const statusList = [
		{ label: "启用", value: 1 },
		{ label: "禁用", value: 2 },
	];

	const propertyType = [
		{ label: "允许", value: 1 },
		{ label: "不允许", value: 0 },
	];

	let [classifyList, setClassifyList] = useState<any>([]);

	const getClassifyList = async () => {
		const res = await classify({
			classifyType: 500,
		});
		setClassifyList(res.data);
	};

	// 表格项
	const columns: ProColumns[] = [
		// {
		// 	title: "道具编号",
		// 	dataIndex: "propsCode",
		// },
		{
			title: "道具ID",
			dataIndex: "classifyId",
			search: false,
		},
		{
			title: "道具图片",
			dataIndex: "propsIcon",
			search: false,
			render: (_, record: any) => {
				if (record.propsIcon) {
					return (
						<Image
							src={record.propsIcon}
							width={50}
							style={{ padding: 8 }}
							alt=""
						/>
					);
				} else {
					return <div>-</div>;
				}
			},
		},
		{
			title: "道具名称",
			dataIndex: "propsName",
		},

		{
			title: "道具环保币",
			dataIndex: "propsCostCoin",
			search: false,
		},
		{
			title: "道具能量",
			dataIndex: "propsCostEnergy",
			search: false,
		},
		{
			title: "分类名称",
			dataIndex: "classifyName",
			search: false,
		},
	];

	// 表单项
	const getFormItems = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		const { coupon } = vm.state;
		return [
			{
				type: "custom",
				label: "分类名称",
				name: "classifyId",
				required: true,
				render: (form: any, record: any) => {
					return (
						<div>
							<Cascader
								defaultValue={[record.classifyName] || ""}
								options={classifyList}
								disabled={isEdit}
								fieldNames={{
									label: "classifyName",
									value: "id",
									children: "list",
								}}
								onChange={(item) => {
									form.setFieldsValue({
										classifyId: item[item.length - 1],
									});
									vm.setState({ classifyId: item[item.length - 1] });
								}}
								placeholder="请选择类别~"
							/>
						</div>
					);
				},
				fieldProps: {
					// isEdit
					disabled: true,
				},
			},

			...(!isEdit
				? [
						{
							type: "text",
							label: "道具Code",
							name: "propsCode",
							required: true,
						},
				  ]
				: []),

			...(vm.state.classifyId == 159
				? [
						{
							type: "select",
							label: "鸡窝类型",
							name: "coopType",
							required: true,
							options: [
								{
									label: "普通",
									value: 10,
								},
								{
									label: "花窝",
									value: 20,
								},
								{
									label: "别墅",
									value: 30,
								},
							],
						},
				  ]
				: []),
			{
				type: "upload",
				label: "道具icon",
				name: "propsIcon",
				fieldProps: {
					limit: 1,
				},
				required: true,
			},
			{
				type: "text",
				label: "道具名称",
				name: "propsName",
				required: true,
			},
			{
				type: "textarea",
				label: "道具描述",
				name: "propsDesc",
				required: false,
			},

			{
				type: "text",
				label: "道具单位",
				name: "propsUnit",
				required: true,
			},
			// {
			// 	type: "custom",
			// 	label: "道具星级",
			// 	name: "propsStar",
			// 	required: false,
			// 	render: (form: any, record: any) => {
			// 		return (
			// 			<Rate
			// 				onChange={(value) => {
			// 					form?.setFieldsValue({ propsStar: value });
			// 				}}
			// 			/>
			// 		);
			// 	},
			// },
			// {
			// 	type: "text",
			// 	label: "道具售价",
			// 	name: "propsPrice",
			// 	required: false,
			// },
			// {
			// 	type: "text",
			// 	label: "道具最大叠加数量",
			// 	name: "propsMaxGroupNum",
			// 	required: true,
			// },
			// {
			// 	type: "text",
			// 	label: "道具库存",
			// 	name: "propsScock",
			// 	required: true,
			// },
			{
				type: "text",
				label: "道具消耗环保币",
				name: "propsCostCoin",
				required: false,
			},
			{
				type: "text",
				label: "道具消耗能量",
				name: "propsCostEnergy",
				required: false,
			},
			{
				type: "text",
				label: "道具附加值",
				name: "propsValue",
				required: true,
				formItemProps: {
					extra: <>体力道具为体力值,鸡窝的话为使用次数,家具填写0</>,
				},
			},
			{
				type: "text",
				label: "道具售卖能量",
				name: "sellPropsGetEnergy",
				required: false,
			},
			{
				type: "text",
				label: "道具售卖环保币",
				name: "sellPropsGetCoin",
				required: false,
			},
			{
				type: "text",
				label: "生产加成速率 ",
				name: "accelerated",
				required: false,
				formItemProps: {
					extra: <>道具鸡窝才有</>,
				},
			},
			{
				type: "custom",
				label: "道具是否可售卖",
				name: "sellType",
				required: false,
				render: (form: any, record: any) => {
					return (
						<Radio.Group
							options={propertyType}
							defaultValue={record.sellType}
							onChange={({ target }) => {
								form?.setFieldsValue({ sellType: target?.value });
							}}
						></Radio.Group>
					);
				},
			},
			{
				type: "custom",
				label: "是否允许作为奖品",
				name: "rewardStatus",
				required: false,
				render: (form: any, record: any) => {
					return (
						<Radio.Group
							options={propertyType}
							defaultValue={record.rewardStatus}
							onChange={({ target }) => {
								form?.setFieldsValue({ rewardStatus: target?.value });
							}}
						></Radio.Group>
					);
				},
			},
			{
				type: "custom",
				label: "道具状态",
				name: "status",
				required: true,
				render: (form: any, record: any) => {
					return (
						<Radio.Group
							options={statusList}
							defaultValue={record.status}
							onChange={({ target }) => {
								form?.setFieldsValue({ status: target?.value });
							}}
						></Radio.Group>
					);
				},
			},
			{
				type: "custom",
				label: "是否在商店展示",
				name: "shopType",
				required: true,
				render: (form: any, record: any) => {
					return (
						<Radio.Group
							options={propertyType}
							defaultValue={record.shopType}
							onChange={({ target }) => {
								form?.setFieldsValue({ shopType: target?.value });
							}}
						></Radio.Group>
					);
				},
			},

			// {
			// 	type: "text",
			// 	label: "道具消耗道具",
			// 	name: "propsCostPropsCode",
			// 	required: true,
			// },
			// {
			// 	type: "text",
			// 	label: "道具消耗道具数量",
			// 	name: "propsCostPropsNums",
			// 	required: true,
			// },
		];
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "propsCode",
		scroll: { x: 1000 },
		columns,
		listProps: {
			url: "/game/props/list",
			method: "GET",
			requestType: "params",
			paramsHandle: (params: any) => {
				return {
					...params,
					classifyId: 0,
				};
			},
		},
		addProps: {
			url: "/game/props/add",
			modalProps: {
				formProps: {
					labelCol: { span: 8 },
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm);
				},
			},
			paramsHandle: ({ ...params }): any => {
				params.propsIcon = (
					params?.propsIcon?.map((item: any) => item.url) || []
				).join(",");
				return {
					...params,
				};
			},
		},
		updateProps: {
			url: "/game/props/edit",
			method: "POST",
			modalProps: {
				formProps: {
					labelCol: { span: 7 },
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm, true);
				},
				formValuesHandle: async (record: any) => {
					return {
						...record,
						propsIcon: record.propsIcon
							? [
									{
										uid: "-1",
										status: "done",
										name: record.propsIcon,
										url: record.propsIcon,
									},
							  ]
							: [],
					};
				},
			},
			paramsHandle: ({ ...params }): any => {
				params.propsIcon = (
					params?.propsIcon?.map((item: any) => item.url) || []
				).join(",");
				return {
					...params,
				};
			},
		},
		deleteProps: {
			url: "/game/props/del",
			method: "POST",
		},
	};

	// 初始化加载数据
	useEffect(() => {
		getClassifyList();
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
